<template>
  <div class="movie-wrapper">
    <header class="page-header canary-theme">
      <div class="page-header-left" @click="goBack">
        <span class="page-header-back"></span>
      </div>
      <div class="page-header-title line-ellipsis">
        {{ filmInfo && filmInfo.datas.name }}
      </div>
      <div class="page-header-right"></div>
    </header>
    <Ad text="19.9元起购票" />
    <div class="movie-detail" v-if="filmInfo">
      <div class="mask"></div>
      <div
        class="poster-bg"
        :style="'background-image: url(' + filmInfo.datas.poster + ')'"
      ></div>
      <div class="detail">
        <div class="poster">
          <img :src="filmInfo.datas.poster" class="poster-img" />
        </div>
        <div class="content">
          <div class="title line-ellipsis">{{ filmInfo.datas.name }}</div>
          <div class="public line-ellipsis">zf Movie</div>
          <div class="score line-ellipsis">
            <span>{{ filmInfo.datas.grade || "评分暂未公布" }}</span
            ><span class="snum">{{ `(${$route.params.filmId}人评)` }}</span>
          </div>
          <div class="type line-ellipsis">
            <span>{{ filmInfo.datas.category.replace(/\|/g, ",") }}</span>
            <div class="type-img"></div>
          </div>
          <div class="public line-ellipsis">
            {{ filmInfo.datas.nation }}{{ "/" + filmInfo.datas.runtime }}分钟
          </div>
          <div class="public line-ellipsis">
            {{ (filmInfo.datas.premiereAt * 1000) | setTimerFilter
            }}{{ filmInfo.datas.nation + "上映" }}
          </div>
        </div>
      </div>
      <router-link class="movie-detail-arrow" :to="'/detail/'+$route.params.filmId"><span class="arrow-bg"></span></router-link>
    </div>
    <div class="select-sticky">
      <div class="show-warp" v-if="allDayCinemaInfo">
        <div class="show-days">
          <van-tabs
            title-class="day"
            @click="reRenderCinema"
            :line-width="103"
            :line-height="2"
            title-active-color="#f03d37"
            :ellipsis="false"
          >
            <van-tab
              v-for="(i, index) in showCinemas"
              :key="index"
              :title="(i.showDate * 1000) | setshowDate"
              title-style="padding:0 19px"
            >
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="nav-wrap">
        <div class="filter-nav">
          <div class="tab">
            <div
              :class="currrnt == index ? 'chosen item' : 'item'"
              v-for="(i, index) in chosenTitleLists"
              @click="chosenTitleHandler(index, i.id)"
              ref="chosenTitleArr"
              :key="i.id"
              data-index="0"
            >
              <span>{{ i.text }}</span
              ><span class="drop"></span>
            </div>
          </div>
        </div>

        <div class="film-cinema-view" v-show="city_list_one_toggter">
          <div
            class="mint-popup area-box filter-box mint-popup-top"
            pop-transition="popup-fade"
            style="z-index: 2001"
          >
            <div data-v-1ad42df7="" class="filter-wrap">
              <ul data-v-1ad42df7="" class="district-list">
                <li data-v-1ad42df7="" data="v" @click="fixedAllCity">
                  <div
                    data-v-1ad42df7=""
                    :class="districtName_current == -1 ? 'selected' : ''"
                  >
                    全城
                  </div>
                </li>
                <li
                  data-v-1ad42df7=""
                  data="v"
                  v-for="(i, index) in showDistrictName"
                  @click="showDistrictNameHandler(index, i)"
                  :key="i"
                >
                  <div
                    data-v-1ad42df7=""
                    :class="districtName_current == index ? 'selected' : ''"
                  >
                    {{ i }}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="show-wrapper" v-if="checkflag">
      <div class="cinema-wrap">
        <div class="list-wrap">
          <router-link
          :to="'/cinema/'+i.cinemaId+'/film/'+$route.params.filmId"
            class="item"
            v-for="(i, index) in renderCinema"
            :key="index"
            data-bid="dp_wx_home_cinema_list"
          >
            <div class="title-wrap">
              <div class="title-block">
                <div class="title line-ellipsis">
                  <span>{{ i.name }}</span>
                </div>
                <div class="price-block">
                  <span class="price">{{ i.lowPrice / 100 }}</span
                  ><span class="after">元起</span>
                </div>
              </div>
              <div class="location-block">
                <div class="line-ellipsis">
                  {{ i.address }}
                </div>
                <div class="distance">8.4km</div>
              </div>
              <div class="label-block">
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  改签
                </div>
                <div
                  style="
                    color: rgb(255, 153, 0);
                    border-color: rgb(255, 153, 0);
                  "
                >
                  折扣卡
                </div>
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  IMAX厅
                </div>
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  60帧厅
                </div>
              </div>
              <div class="discount-block">
                <div class="discount">
                  <div class="discount-label cardPromotionTag"></div>
                  <div class="discount-label-text">开卡特惠，5.9元起开卡</div>
                </div>
              </div>
            </div>
            <div class="recent" data-bid="dp_wx_buy_cinema_list_spread">
              <span class="time-line">近期场次: 18:25</span>
            </div>
            <div class="lazyload-wrapper">
              <div class="lazyload-placeholder"></div>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 底部定位 -->
      <div class="" v-if="adress">
        <div class="locatebanner">
          <span class="locatebanner-arrow"></span
          ><span class="locatebanner-content">{{
            adress.formatted_address || "定位中..."
          }}</span>
          <div class="locatebanner-refresh-wrap">
            <span class="locatebanner-refresh"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="show-wrapper" v-else>
      <div class="cinema-wrap">
        <div class="list-wrap">
          <div
            class="item"
            v-for="(i, index) in districtList"
            :key="index"
            data-bid="dp_wx_home_cinema_list"
          >
            <div class="title-wrap">
              <div class="title-block">
                <div class="title line-ellipsis">
                  <span>{{ i.name }}</span>
                </div>
                <div class="price-block">
                  <span class="price">{{ i.lowPrice / 100 }}</span
                  ><span class="after">元起</span>
                </div>
              </div>
              <div class="location-block">
                <div class="line-ellipsis">
                  {{ i.address }}
                </div>
                <div class="distance">8.4km</div>
              </div>
              <div class="label-block">
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  改签
                </div>
                <div
                  style="
                    color: rgb(255, 153, 0);
                    border-color: rgb(255, 153, 0);
                  "
                >
                  折扣卡
                </div>
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  IMAX厅
                </div>
                <div
                  style="
                    color: rgb(87, 157, 175);
                    border-color: rgb(87, 157, 175);
                  "
                >
                  60帧厅
                </div>
              </div>
              <div class="discount-block">
                <div class="discount">
                  <div class="discount-label cardPromotionTag"></div>
                  <div class="discount-label-text">开卡特惠，5.9元起开卡</div>
                </div>
              </div>
            </div>
            <div class="recent" data-bid="dp_wx_buy_cinema_list_spread">
              <span class="time-line">近期场次: 18:25</span>
            </div>
            <div class="lazyload-wrapper">
              <div class="lazyload-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部定位 -->
      <div class="" v-if="adress">
        <div class="locatebanner">
          <span class="locatebanner-arrow"></span
          ><span class="locatebanner-content">{{
            adress.formatted_address || "定位中..."
          }}</span>
          <div class="locatebanner-refresh-wrap">
            <span class="locatebanner-refresh"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import http from "../../utils/htttp";
import Ad from "../movie/movie_ad.vue";
import * as moment from "moment";
import { getLocation, getCityId } from "@/utils/$getlocation";
moment.locale(["zh-cn", "zh-tw"]);
import Vue from "vue";
import { Tab, Tabs, Toast } from "vant";
Vue.use(Tab).use(Tabs).use(Toast);
export default {
  components: {
    Ad,
  },
  filters: {
    setTimerFilter(timer) {
      return moment(timer).format("YYYY-MM-DD HH:mm");
    },
    setshowDate(timer) {
      let initTime =
        moment(timer).format("dddd") + moment(timer).format("MMMDo");
      return initTime.replace(/星期/g, "周");
    },
  },
  data() {
    return {
      city_list_one_toggter: false,
      time_current: 0,
      chosenTitleLists: [
        { id: 1, text: "全城" },
        { id: 2, text: "品牌" },
        { id: 3, text: "特色" },
      ],
      currrnt: -1,
      filmInfo: null,
      adress: null,
      cityInfo: null,
      allDayCinemaInfo: null,
      renderCinema: [],
      render_index: 0,
      districtName_current: -1,
      checkflag: true,
      districtList: [],
    };
  },
  async created() {
    this.filmInfo = await this.getFilmInfo();
    this.adress = await getLocation();
    this.cityInfo = await getCityId(
      this.adress.addressComponent.city.substring(0, 2)
    );
    this.allDayCinemaInfo = await this.getAllDayCinemaInfo(
      this.cityInfo.cityId,
      this.cityId
    );

    this.renderCinema = await this.getRenderCinema(
      this.cityInfo.cityId,
      this.cityId
    );
  },
  mounted() {
    this.setBodyStyle();
  },
  methods: {
    //跳转详情页
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //固定全城的处理函数
    fixedAllCity() {
      this.checkflag = true;
      this.city_list_one_toggter = false;
      this.districtName_current = -1;
      this.$refs.chosenTitleArr[0].className = "item";
      this.chosenTitleLists[0].text = "全城";
    },
    //改变全城选中状态
    showDistrictNameHandler(index, name) {
      this.districtName_current = index;
      this.city_list_one_toggter = false;
      this.chosenTitleLists[0].text = name;
      this.$refs.chosenTitleArr[0].className = "item";
      this.checkflag = false;
      this.districtList = this.renderCinema.filter(
        (item) => item.districtName == name
      );
    },
    //重新渲染影院列表
    reRenderCinema(index) {
      this.districtName_current = -1;
      this.$refs.chosenTitleArr[0].className = "item";
      this.chosenTitleLists[0].text = "全城";
      this.render_index = index;
      this.getRenderCinema(this.cityInfo.cityId).then((res) => {
        this.renderCinema = res;
      });
    },
    //设置body样式
    setBodyStyle() {
      document.querySelector("body").className = "page-cinema-movie"
      // document.querySelector("body").style.overflow='auto'

    },
    //全城，品牌，特色处理函数
    chosenTitleHandler(index, id) {
      this.currrnt = -1;
      this.$refs.chosenTitleArr[index].getAttribute("class").includes("chosen")
        ? (this.$refs.chosenTitleArr[index].className = "item")
        : (this.$refs.chosenTitleArr[index].className = "item chosen");
      if (id == 1) {
        this.city_list_one_toggter = !this.city_list_one_toggter;
      }
    },
    
    //获取影片信息
    getFilmInfo() {
      return new Promise((res, rej) => {
        http("/detail", { params: { filmId: this.$route.params.filmId } }).then(
          (data) => res(data.data)
        );
      });
    },
    //获取显示日期的所有影院信息
    getAllDayCinemaInfo(id, vuexid) {
      return new Promise((res, rej) => {
        http("/alldaycinemas", {
          params: {
            filmId: this.$route.params.filmId,
            cityId: vuexid || id,
          },
        }).then((data) => res(data.data.data));
      });
    },
    //获取当前要渲染出来的影院
    getRenderCinema(id, vuexid) {
      if (this.sort(this.allDayCinemaInfo.showCinemas).length <= 0) return;
      return new Promise((res, rej) => {
        http
          .post("/rendercinema", {
            cityId: vuexid || id,
            cinemaIds: this.sort(this.allDayCinemaInfo.showCinemas)[
              this.render_index
            ].cinemaList.join(","),
          })
          .then((data) => res(data.data.cinemas));
      });
    },
    //按时间戳排序
    sort(arr) {
      let maxlength = arr.length - 1,
        tem,
        flag;
      for (var i = maxlength; i > 0; i--) {
        flag = true;
        for (var j = 0; j < i; j++) {
          if (arr[j].showDate > arr[j + 1].showDate) {
            tem = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = tem;
            flag = false;
          }
        }
        if (!flag) continue;
      }
      return arr;
    },
  },
  computed: {
    ...mapState("city", ["cityId"]),
    showCinemas() {
      return this.sort(this.allDayCinemaInfo.showCinemas);
    },
    showDistrictName() {
      if (!this.renderCinema) return "";
      return Array.from(
        new Set(this.renderCinema.map((item) => item.districtName))
      );
    },
  },
  // beforeDestroy(){
  //   document.querySelector('body').style.overflow='hidden'
  // }
};
</script>
<style   >
.page-cinema-movie{
  overflow: auto;
}
.tabs-bar-wrapper {
  position: relative;
  z-index: 100;
  width: 100%;
  overflow-x: hidden;
  background: #fff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.tabs-bar-wrapper a {
  text-decoration: none;
}

.tabs-bar-wrapper li,
.tabs-bar-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs-bar-wrapper .tabs-bar {
  height: 49px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  -o-transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1),
    -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  position: relative;
}

.tabs-bar-wrapper .tabs-bar::-webkit-scrollbar {
  display: none;
}

.tabs-bar-wrapper .tabs-bar:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.tabs-bar-wrapper .tabs-bar .tabs-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.tabs-bar-wrapper .tabs-bar .tabs-nav li {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
  color: #191a1b;
  text-align: center;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.tabs-bar-wrapper .tabs-bar .tabs-nav li.active {
  color: #ff5f16;
}

.tabs-bar-wrapper .tabs-bar .tabs-nav .tab-ink-bar-wrapper {
  position: absolute;
  margin: auto;
  top: 30px;
  left: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  -o-transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1),
    -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
}

.tabs-bar-wrapper .tabs-bar .tabs-nav .tab-ink-bar-wrapper .tab-ink-bar {
  border-bottom: 2px solid #ff5f16;
  border-radius: 20px;
  display: block;
  margin: auto;
}

.cinema-banner-wrap .cinema-list[data-v-fb31cdca] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cinema-banner-wrap .cinema-list li[data-v-fb31cdca] {
  padding: 15px;
  position: relative;
  background-color: #fff;
}

.cinema-banner-wrap .cinema-list li[data-v-fb31cdca]:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.cinema-banner-wrap .cinema-list li .name[data-v-fb31cdca] {
  font-size: 15px;
  color: #18191a;
  position: relative;
}

.cinema-banner-wrap .cinema-list li .name .icon[data-v-fb31cdca] {
  color: #ffb245;
  margin-left: 7px;
  font-size: 10px;
  padding: 0 6px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cinema-banner-wrap .cinema-list li .name .icon[data-v-fb31cdca]:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #ffb245;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.cinema-banner-wrap .cinema-list li .type[data-v-fb31cdca] {
  margin-top: 5px;
  font-size: 13px;
  color: #797d82;
}

.price-fmt {
  font-size: 15px;
  color: #ff5f16;
  height: 0 !important;
  display: inline-table !important;
}

.price-fmt,
.price-fmt span {
  float: none !important;
}

.price-fmt i {
  font-size: 11px;
  font-style: normal;
}

.cinema-item[data-v-a9e64f28] {
  padding: 15px;
  position: relative;
}

.cinema-item[data-v-a9e64f28]:not(:first-child):after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.cinema-item .cinema-detail[data-v-a9e64f28] {
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cinema-item .cinema-detail .left[data-v-a9e64f28] {
  width: calc(100vw - 100px);
}

.cinema-item .cinema-detail .left .cinema-name[data-v-a9e64f28] {
  font-size: 15px;
  margin-bottom: 5px;
  color: #191a1b;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinema-item .cinema-detail .left .address[data-v-a9e64f28] {
  font-size: 13px;
  color: #797d82;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinema-item .cinema-detail .right[data-v-a9e64f28] {
  color: #ff5f16;
  width: 70px;
  text-align: right;
}

.cinema-item .cinema-detail .right .qi[data-v-a9e64f28] {
  font-size: 10px;
}

.cinema-item .cinema-detail .right .distance[data-v-a9e64f28] {
  color: #797d82;
  font-size: 10px;
  line-height: 26px;
}

.cinema-item .cinema-detail .right .hidePrice[data-v-a9e64f28] {
  visibility: hidden;
}

.cinema-item .cinema-schedule-wrap[data-v-a9e64f28] {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  overflow-x: scroll;
  padding-top: 15px;
}

.cinema-item .cinema-schedule-wrap[data-v-a9e64f28]::-webkit-scrollbar {
  display: none;
}

.cinema-item .cinema-schedule-wrap .disable .language[data-v-a9e64f28],
.cinema-item .cinema-schedule-wrap .disable .price[data-v-a9e64f28],
.cinema-item .cinema-schedule-wrap .disable .state-at[data-v-a9e64f28] {
  color: #d2d6dc !important;
}

.cinema-item .cinema-schedule-wrap .schedule-item[data-v-a9e64f28] {
  height: 60px;
  width: 70px;
  float: left;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
  text-align: center;
  margin-right: 10px;
  padding: 6px 0;
  background-color: hsla(0, 0%, 95.7%, 0.6);
}

.cinema-item .cinema-schedule-wrap .schedule-item .state-at[data-v-a9e64f28] {
  font-size: 14px;
  color: #191a1b;
  line-height: 17px;
}

.cinema-item .cinema-schedule-wrap .schedule-item .language[data-v-a9e64f28] {
  font-size: 10px;
  color: #bdc0c5;
  width: 60px;
  line-height: 14px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 1px;
}

.cinema-item .cinema-schedule-wrap .schedule-item .price[data-v-a9e64f28] {
  font-size: 13px;
  color: #ffb232;
}

.cinema-item
  .cinema-schedule-wrap
  .schedule-item
  .price
  .price-icon[data-v-a9e64f28],
.cinema-item
  .cinema-schedule-wrap
  .schedule-item
  .price
  .upon[data-v-a9e64f28] {
  font-size: 8px;
}

.film-cinema-view[data-v-1ad42df7] {
  background-color: #fff;
  min-height: 100vh;
}

.film-cinema-view .mint-popup[data-v-1ad42df7] {
  top: 142px;
  z-index: 2998 !important;
}

.film-cinema-view .v-modal[data-v-1ad42df7] {
  background: rgba(0, 0, 0, 0.6);
  z-index: 1900 !important;
}

.film-cinema-view .filter-wrap[data-v-1ad42df7] {
  width: 100vw;
}

.film-cinema-view .district-list[data-v-1ad42df7] {
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0 0 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.film-cinema-view .district-list li[data-v-1ad42df7] {
  font-size: 12px;
  display: inline-block;
  width: calc(25vw - 12.5px);
  padding-bottom: 15px;
  padding-right: 10px;
  height: 30px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

.film-cinema-view .district-list li div[data-v-1ad42df7] {
  position: relative;
  color: #797d82;
  border-radius: 3px;
  text-align: center;
  height: 30px;
  line-height: 27px;
}

.film-cinema-view .district-list li div[data-v-1ad42df7]:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid rgba(210, 214, 220, 0.5);
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.film-cinema-view .district-list li .selected[data-v-1ad42df7] {
  color: #ff5f16;
}

.film-cinema-view .district-list li .selected[data-v-1ad42df7]:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #ff5f16;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.film-cinema-view .filter-list[data-v-1ad42df7] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.film-cinema-view .filter-list li[data-v-1ad42df7] {
  height: 44px;
  width: 100vw;
  padding: 0 15px;
  position: relative;
  color: #797d82;
}

.film-cinema-view .filter-list li .filter-text[data-v-1ad42df7] {
  margin-left: 10px;
  font-size: 13px;
  letter-spacing: -0.2px;
  line-height: 44px;
}

.film-cinema-view .filter-list li .placehold[data-v-1ad42df7] {
  display: inline-block;
  width: 13px;
}

.film-cinema-view .filter-list li[data-v-1ad42df7]:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.film-cinema-view .filter-list .selected[data-v-1ad42df7] {
  color: #ff5f16;
}

.film-cinema-view .filter .tab[data-v-1ad42df7] {
  height: 49px;
  width: 100%;
  padding: 15px 0;
  position: relative;
  z-index: 2999;
  background-color: #fff;
}

.film-cinema-view .filter .tab .district[data-v-1ad42df7],
.film-cinema-view .filter .tab .specify[data-v-1ad42df7] {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #191a1b;
  float: left;
  width: 50%;
}

.film-cinema-view .filter .tab .district i[data-v-1ad42df7],
.film-cinema-view .filter .tab .specify i[data-v-1ad42df7] {
  margin-left: 6px;
}

.film-cinema-view .filter .tab[data-v-1ad42df7]:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.film-cinema-view .filter .tab img[data-v-1ad42df7] {
  vertical-align: middle;
  padding-left: 2px;
}

.film-cinema-view .filter .detail[data-v-1ad42df7] {
  position: relative;
  background-color: #fff;
}

.film-cinema-view .filter .detail .district-info[data-v-1ad42df7] {
  width: 100%;
  padding: 7.5px 5px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

.film-cinema-view
  .filter
  .detail
  .district-info
  .district-item[data-v-1ad42df7] {
  float: left;
  height: 30px;
  width: 81px;
  margin: 7.5px 5px;
  color: #797d82;
  text-align: center;
  font-size: 13px;
  line-height: 30px;
  position: relative;
}

.film-cinema-view
  .filter
  .detail
  .district-info
  .district-item[data-v-1ad42df7]:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #797d82;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.film-cinema-view .filter .detail .district-info .active[data-v-1ad42df7] {
  position: relative;
}

.film-cinema-view
  .filter
  .detail
  .district-info
  .active[data-v-1ad42df7]:after {
  content: " ";
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  position: absolute;
  border: 1px solid #ff5f16;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}

.film-cinema-view .filter .detail .specify-info[data-v-1ad42df7] {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

.film-cinema-view .filter .detail .specify-info .nearest[data-v-1ad42df7],
.film-cinema-view .filter .detail .specify-info .recently[data-v-1ad42df7] {
  height: 44px;
  font-size: 13px;
  line-height: 18.5px;
  padding: 13px 0 13px 38px;
  color: #797d82;
  position: relative;
}

.film-cinema-view .filter .detail .specify-info .nearest[data-v-1ad42df7]:after,
.film-cinema-view
  .filter
  .detail
  .specify-info
  .recently[data-v-1ad42df7]:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.film-cinema-view .filter .detail .specify-info .nearest .tick[data-v-1ad42df7],
.film-cinema-view
  .filter
  .detail
  .specify-info
  .recently
  .tick[data-v-1ad42df7] {
  position: absolute;
  left: 0;
  padding-left: 15px;
}

.film-cinema-view .filter .active[data-v-1ad42df7] {
  color: #ff5f16 !important;
}

.film-cinema-view .cinema-list[data-v-1ad42df7] {
  position: relative;
}

.film-cinema-view .cinema-list .mask[data-v-1ad42df7] {
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
}

.film-cinema-view .dateWrap[data-v-1ad42df7] {
  padding-top: 44px;
  z-index: 2999;
}


.myui-toast-mask {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.myui-toast-mask,
.myui-toast-nomask {
  position: fixed;
  z-index: 99999;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: initial;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}

.myui-toast-nomask {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.myui-toast-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 12px 18px;
  max-width: 260px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 9px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  line-height: 19px;
  word-break: break-word;
  font-family: PingFangSC-Regular;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.myui-toast-img.type-custom,
.myui-toast-img.type-fail,
.myui-toast-img.type-loading,
.myui-toast-img.type-success {
  width: 18px;
  height: 18px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
}

.myui-toast-img.type-fail {
  display: none;
  background-image: url("");
}

.myui-toast-img.type-success {
  background-image: url("");
}

.myui-toast-img.type-loading {
  background-image: url(https://p0.meituan.net/moviemachine/080350ea3109aab5e933ab5cb648526b16240.gif);
}

.myui-toast-content-seat {
  padding: 0 18px;
  border-radius: 19px;
  white-space: nowrap;
}

.myui-toast-content-seat .type-seat {
  width: 38px;
  height: 39px;
  vertical-align: -15px;
  margin-right: 8px;
}

.myui-toast-seat {
  width: 38px;
  height: 39px;
}

.myui-toast-text-seat {
  line-height: 39px;
}

.myui-toast-content-seat-tips {
  padding: 30px 21px;
  display: inline-block;
  width: 146px;
}

.myui-toast-content-seat-tips .type-seat-tips {
  width: 104px;
  height: 24px;
  display: block;
  margin-bottom: 15px;
}

.myui-toast-seat-tips {
  width: 104px;
  height: 24px;
}

.myui-toast-custom {
  width: 18px;
  height: 18px;
}

.popup-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100000;
  position: fixed;
}

.popup-alert {
  min-width: 280px;
  background: #fff;
  border-radius: 15px;
  position: fixed;
  margin: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  letter-spacing: 0;
  text-align: center;
  z-index: 10000002;
}

.popup-alert .popup-container {
  padding: 21px;
}

.popup-alert .popup-container .popup-title .title-text {
  font-size: 17px;
  font-family: PingFangSC-Medium;
  color: #333;
}

.popup-alert .popup-container .popup-title .title-icon {
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

.popup-alert .popup-container .popup-title .title-icon[data-icon="big"] {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/success-big.eaffcae2.png);
}

.popup-alert .popup-container .popup-title .title-icon[data-icon="small"] {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  background-image: url();
}

.popup-alert .popup-container .popup-title .close {
  position: absolute;
  right: 21px;
  top: 21px;
  color: #000;
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 50%;
}

.popup-alert .popup-container .popup-content {
  margin-top: 6px;
  font-size: 14px;
  line-height: 24px;
  font-family: PingFangSC-Regular;
  color: #333;
}

.popup-alert .popup-buttons {
  font-size: 17px;
  height: 48px;
  line-height: 48px;
}

.popup-alert .popup-buttons a {
  float: left;
  width: 100%;
  height: 100%;
  letter-spacing: 1px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2%;
}

.popup-alert .popup-buttons a:active {
  background: rgba(0, 0, 0, 0.03);
}

.popup-alert .popup-buttons a.cbtn {
  color: #333;
  font-family: PingFangSC-Regular;
}

.popup-alert .popup-buttons a.dbtn {
  color: #f03d37;
  font-family: PingFangSC-Medium;
}

.popup-alert .popup-buttons .more-button {
  width: 50%;
}

.border-1px-l,
.border-1px-t {
  position: relative;
}

.border-1px-l:after,
.border-1px-t:after {
  background: rgba(0, 0, 0, 0.1);
}

.flow-control-disabled {
  color: #ddd;
  border-bottom-right-radius: 15px;
}

.popup-buttons a.flow-control-disabled:active {
  background: #fff;
}

.container-2FSht {
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

.waiting-2zC0v {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #fff;
}

.image-RBO2T {
  display: block;
  width: 107px;
  height: 98px;
  margin: 0 auto;
}

.progress-1YW2Q {
  display: block;
  margin-top: 24px;
  width: 100%;
}

.text-3XG-J {
  margin-top: 20px;
  line-height: 22px;
  text-align: center;
  color: #333;
  font-size: 13px;
}

@-webkit-keyframes img_animation-1P4pK {
  0% {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting1.e3502653.png);
  }

  to {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting2.7b10b13c.png);
  }
}

@keyframes img_animation-1P4pK {
  0% {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting1.e3502653.png);
  }

  to {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting2.7b10b13c.png);
  }
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #ccc;
  border-top: none;
  border-left: none;
  position: relative;
  left: -2px;
}

.image-fade-in {
  animation: imageanimation 1s forwards;
  -webkit-animation: imageanimation 1s forwards;
}

@keyframes imageanimation {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes imageanimation {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.border-1px,
.border-1px-b,
.border-1px-l,
.border-1px-r,
.border-1px-radius,
.border-1px-t {
  position: relative;
  border: none;
}

.border-1px:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 200%;
  border: 1px solid #d8d8d8;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.border-1px-b:after {
  bottom: 0;
}

.border-1px-b:after,
.border-1px-t:after {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: #d8d8d8;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.border-1px-t:after {
  top: 0;
}

.border-1px-l:after {
  left: 0;
}

.border-1px-l:after,
.border-1px-r:after {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  content: "";
  background: #d8d8d8;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.border-1px-r:after {
  right: 0;
}

.border-1px-radius:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 18px;
}

.mb-outline-b {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-bottom-outline.88c9645d.png)
    0 bottom repeat-x;
}

.mb-outline-t {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-top-outline.fb6ee366.png)
    0 top repeat-x;
}

.mb-outline-tb {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-top-outline.fb6ee366.png)
      0 top repeat-x,
    url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-bottom-outline.88c9645d.png)
      0 bottom repeat-x;
}

.mb-line-b {
  background: url()
    0 bottom repeat-x;
}

.mb-line-t {
  background: url()
    0 top repeat-x;
}

.mb-line-tb {
  background: url()
      0 top repeat-x,
    url()
      0 bottom repeat-x;
}

.mb-line-l {
  background: url()
    left 0 repeat-y;
}

.mb-line-r {
  background: url()
    right 0 repeat-y;
}

.mb-line-lr {
  background: url()
      left 0 repeat-y,
    url()
      right 0 repeat-y;
}

.mb-line-all {
  background: url()
      0 top repeat-x,
    url()
      right 0 repeat-y,
    url()
      0 bottom repeat-x,
    url()
      left 0 repeat-y;
}

@media (-webkit-min-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 3) {
  .mb-line-all,
  .mb-line-b,
  .mb-line-l,
  .mb-line-lr,
  .mb-line-r,
  .mb-line-t,
  .mb-line-tb,
  .mb-outline-b,
  .mb-outline-t,
  .mb-outline-tb {
    background-size: 1px 1px;
  }
}

@font-face {
  font-family: base_icon;
  src: url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fbase14.woff)
      format("woff"),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fbase14.otf)
      format("opentype");
}

@font-face {
  font-family: canary_icon;
  src: url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.woff)
      format("woff"),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.ttf),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.eot);
}

.text-icon {
  display: inline-block;
  font-family: base_icon;
  font-style: normal;
  vertical-align: middle;
}

body,
html {
  height: 100%;
}

html {
  font-size: 50px;
}

@media (min-width: 414px) {
  html {
    font-size: 51.5px;
  }
}

@media (max-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media (max-width: 360px) {
  html {
    font-size: 45px;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 42px;
  }
}

body {
  color: #777;
  font-size: 14px;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a,
a:visited {
  color: inherit;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::-webkit-scrollbar {
  height: 0 !important;
}

button,
input,
select,
textarea {
  outline: none;
  resize: none;
}

a,
button,
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.loader-1kZfS {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.loaderImg-tOmcI {
  position: relative;
  width: 32px;
  height: 32px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/red-circle.fa74aa31.png)
    no-repeat;
  background-size: 100% 100%;
  -webkit-transform: rotate 1turn;
  transform: rotate 1turn;
  -webkit-animation: rotation-3nMlR 1s linear infinite;
  animation: rotation-3nMlR 1s linear infinite;
}

@-webkit-keyframes rotation-3nMlR {
  0% {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(1turn);
  }
}

@keyframes rotation-3nMlR {
  0% {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(1turn);
  }
}

.innerLoading-14-G7 {
  display: inline-block;
  position: relative;
  top: -32px;
  left: 0;
  width: 32px;
  height: 32px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/cat.6e48e4e6.png)
    no-repeat;
  background-size: 100% 100%;
}

@-webkit-keyframes loader-1kZfS {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes loader-1kZfS {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: initial;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: initial;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: initial;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: initial;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

[hidden],
template {
  display: none;
}

.page-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 50px;
  text-align: center;
  color: #fff;
  background: #e54848;
}

.page-header-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  line-height: 50px;
  font-size: 18px;
  font-weight: 400;
}

.page-header-left,
.page-header-right {
  width: 50px;
  height: 100%;
  line-height: 50px;
}

.page-header-back {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.page-header-back:before {
  content: "";
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.page-header {
  display: none;
}

.page-header.canary-theme,
.page-header.hsbc-theme,
.page-header.huawei-theme,
.page-header.hwfastapp-theme,
.page-header.ICBC-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #e54848;
}

.page-header.dpmweb-theme,
.page-header.mdianping-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #f63;
}

.page-header.imeituan-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #f03d37;
}

.root-result .am-result .am-result-pic {
  width: 105px;
  height: 120px;
  margin: 0 auto;
  line-height: 120px;
  background-size: 105px 120px;
}

.root-result .am-result .spe {
  width: 105px;
  height: 120px;
}

.root-result .am-result .sub-title {
  color: #888;
  font-size: 14px;
  padding: 30px 0 18px;
  margin-left: 15px;
}

.root-result .am-result .am-result-message,
.root-result .am-result .am-result-title {
  font-size: 18px;
  color: #888;
}

.root-result .am-result .am-result-message .link,
.root-result .am-result .am-result-title .link {
  font-size: 16px;
  text-decoration: underline;
  margin: 0 5px;
}

.root-result .phone {
  font-size: 12px;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 15px 0;
  color: #999;
}

.root-login-button {
  padding: 0;
  border: 0;
  margin-left: 0.17rem;
  color: #1890ff;
  background-color: initial;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
}

.root-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.page-cinema-movie_body{
  overflow: auto;
}
.page-cinema-movie .movie-detail {
  position: relative;
  height: 188px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
}

.page-cinema-movie .movie-detail .mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.page-cinema-movie .movie-detail .poster-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  -webkit-filter: blur(1.2rem);
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.page-cinema-movie .movie-detail .detail {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 19px 30px 19px 15px;
  height: 150px;
}

.page-cinema-movie .movie-detail .detail .poster {
  width: 110px;
  height: 150px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/bg.fbcd24ee.png);
  background-size: 100% 100%;
}

.page-cinema-movie .movie-detail .detail .poster .poster-img {
  width: 100%;
  height: 100%;
}

.page-cinema-movie .movie-detail .detail .content {
  overflow-x: hidden;
  margin-left: 12.5px;
  line-height: 1;
  color: #fff;
}

.page-cinema-movie .movie-detail .detail .title {
  font-size: 20px;
  margin-top: 2px;
  font-weight: 700;
  overflow: hidden;
}

.page-cinema-movie .movie-detail .detail .score {
  margin-top: 11px;
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
}

.page-cinema-movie .movie-detail .detail .score .snum {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  color: #fff;
  opacity: 0.8;
}

.page-cinema-movie .movie-detail .detail .type {
  margin-top: 10px;
  opacity: 0.8;
}

.page-cinema-movie .movie-detail .detail .type .type-img {
  display: inline-block;
  margin-left: 5px;
  width: 42px;
  height: 13px;
  vertical-align: top;
  opacity: 0.85;
}

.page-cinema-movie .movie-detail .detail .type .type-img .icon-bg {
  display: block;
  height: 100%;
}

.page-cinema-movie .movie-detail .detail .type .type-img .sd-imax {
  width: 42px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/sd-imax.6ce567be.png);
  background-size: 100% 100%;
}

.page-cinema-movie .movie-detail .detail .type .type-img .sd {
  width: 16px;
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie .movie-detail .detail .type .type-img .imax {
  width: 26px;
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie .movie-detail .detail .public {
  margin-top: 10px;
  opacity: 0.8;
}

.page-cinema-movie .movie-detail .movie-detail-arrow {
  position: absolute;
  width: 10px;
  height: 14.6px;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-cinema-movie .movie-detail .movie-detail-arrow .arrow-bg {
  display: block;
  width: 100%;
  height: 100%;
  background: url();
  background-size: cover;
}

.page-cinema-movie .show-warp {
  height: 45px;
}

.page-cinema-movie .show-warp.disappear {
  display: none;
  height: 0;
}

.page-cinema-movie .scroll-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.page-cinema-movie .show-days {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 45px;
  background-color: #fff;
  overflow-x: auto;
  z-index: 11;
}

.page-cinema-movie .show-days.select-fixed {
  position: fixed;
  top: 50px;
  left: 0;
}

.page-cinema-movie .show-days .day {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 115px;
  line-height: 43px;
  margin-left: 4.5px;
  font-size: 14px;
  text-align: center;
  color: #666;
}

.page-cinema-movie .show-days .chosen {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}

.page-cinema-movie .show-days.day-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.page-cinema-movie .cinema-wrap {
  margin-top: 0;
  background-color: #fff;
}

.page-cinema-movie .cinema-wrap .list-wrap {
  background-color: #fff;
}

.page-cinema-movie .cinema-wrap .list-wrap .item {
  position: relative;
  padding: 13px 15px 13px 0;
  margin-left: 15px;
  overflow: hidden;
}

.page-cinema-movie .cinema-wrap .list-wrap .item:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background-size: contain;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.used {
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/used.594b2f8d.png);
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.fav {
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/fav.cf021c57.png);
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.vip {
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/vip.effda0cb.png);
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap {
  line-height: 1.5;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .title-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .title-block
  .title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .title-block
  .price-block {
  display: inline-block;
  padding-left: 3px;
  color: #f03d37;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .title-block
  .price-block
  .price {
  font-size: 18px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .title-block
  .price-block
  .after {
  padding-left: 3px;
  font-size: 11px;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .location-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .label-block {
  height: 17px;
  line-height: 17px;
  margin-top: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
  border: 1px solid #000;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  > div
  + div {
  margin-left: 5px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .allowRefund,
.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .endorse,
.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .hallType,
.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .sell {
  color: #589daf;
  border: 1px solid #589daf;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .snack,
.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .label-block
  .vipTag {
  color: #f90;
  border: 1px solid #f90;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .discount-block {
  color: #999;
  margin-bottom: 4px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label {
  width: 15px;
  height: 14px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label.cardPromotionTag {
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label.platformActivityTag {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/platform.8d84dec2.png);
  background-size: 100% 100%;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label.couponPromotionTag {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/coupon.07e41bc9.png);
  background-size: 100% 100%;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label.merchantActivityTag {
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label.starActivityTag {
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .title-wrap
  .discount-block
  .discount
  .discount-label-text {
  margin-left: 5px;
  font-size: 11px;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .recent {
  padding: 0 15px 0 0;
  margin-right: -15px;
  line-height: 1.5;
  font-size: 0;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .recent > span {
  font-size: 12px;
  color: #999;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .recent > span.time-line {
  display: inline-block;
  position: relative;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .recent
  > span.time-line
  + span.time-line {
  margin-left: 14px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .recent
  > span.time-line
  + span.time-line:before {
  content: "";
  display: block;
  position: absolute;
  height: 15px;
  width: 1px;
  left: -7px;
  background: #e1e1e1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-cinema-movie .cinema-wrap .list-wrap .item .recent .unfold {
  float: right;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .recent .unfold .arrow-img {
  display: inline-block;
  width: 13px;
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .plist-container {
  margin-top: 9px;
  height: 68px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .plist::-webkit-scrollbar {
  display: none;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .plist-container .plist {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  white-space: nowrap;
  padding-top: 6px;
  overflow-x: overlay;
}

.page-cinema-movie .cinema-wrap .list-wrap .item .plist-container .plist .show {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-basis: 70px;
  flex-basis: 70px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background-color: #fafafa;
  margin-right: 10px;
  width: 70px;
  height: 62px;
  text-align: center;
  border-radius: 3px;
  position: relative;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .plist
  .show
  .next-day {
  position: absolute;
  background: #a3cfd9;
  border-radius: 2px;
  color: #fff;
  font-size: 9px;
  width: 40px;
  height: 12px;
  line-height: 12px;
  left: 15px;
  top: -6px;
  z-index: 1;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .plist
  .show
  .tm {
  font-size: 17px;
  line-height: 17px;
  color: #333;
  margin-top: 6px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .plist
  .show
  .cat {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .plist
  .show
  .pr {
  font-size: 11px;
  color: #ef4238;
  margin-top: 4px;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .border-half-px {
  position: relative;
}

.page-cinema-movie
  .cinema-wrap
  .list-wrap
  .item
  .plist-container
  .border-half-px:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border: 1px solid #e5e5e5;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border-radius: 6px;
  box-sizing: border-box;
  pointer-events: none;
}

.page-cinema-movie .cinema-wrap .list-wrap .empty {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.page-cinema-movie .cinema-wrap .no-cinema {
  width: 50%;
  padding-top: 20%;
  margin: auto;
}

.page-cinema-movie .cinema-wrap .no-cinema .no-img {
  width: 40%;
  height: 86px;
  margin: auto;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/no-cinema.b39c6067.png);
  background-size: 100% 100%;
}

.page-cinema-movie .cinema-wrap .no-cinema .no-cinema-tip {
  margin-top: 10px;
  text-align: center;
}

.page-cinema-movie .cinema-wrap .load {
  height: 40px;
  background: #fff;
}

.page-cinema-movie .cinema-wrap .load.appear {
  display: block;
}

.page-cinema-movie .filter-nav {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #fff;
  z-index: 11;
}

.page-cinema-movie .filter-nav .tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}

.page-cinema-movie .filter-nav .tab:before {
  top: 0;
}

.page-cinema-movie .filter-nav .tab:after,
.page-cinema-movie .filter-nav .tab:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.page-cinema-movie .filter-nav .tab:after {
  bottom: 0;
}

.page-cinema-movie .filter-nav .tab .item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 13px;
  line-height: 40px;
  color: #666;
}

.page-cinema-movie .filter-nav .tab .chosen {
  color: #dd403b;
}

.page-cinema-movie .filter-nav .tab .chosen .drop {
  border-bottom-color: #dd403b;
  border-top-color: transparent;
  top: 14px;
}

.page-cinema-movie .filter-nav .tab .chosenDown {
  color: #dd403b;
}

.page-cinema-movie .filter-nav .tab .chosenDown .drop {
  border-top-color: #dd403b;
  border-bottom-color: transparent;
}

.page-cinema-movie .filter-nav .tab .item + .item:before {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: 0;
  border-left: 1px solid #d8d8d8;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

.page-cinema-movie .filter-nav .tab .filter-text {
  text-align: left;
}

.page-cinema-movie .filter-nav .tab .filter-text span:first-child {
  display: inline-block;
  margin-left: 10px;
  width: 92.5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.page-cinema-movie .filter-nav .tab .filter-text .drop {
  margin-left: 0;
  right: 13.6px;
}

.page-cinema-movie .filter-nav .tab .drop {
  display: inline-block;
  position: absolute;
  top: 18px;
  width: 0;
  height: 0;
  margin-left: 4px;
  border: 4px solid transparent;
  border-top-color: #b0ada8;
}

.page-cinema-movie .filter-nav .close-tab {
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

.page-cinema-movie .filter-nav .close-tab .region {
  min-height: 150px;
  font-size: 15px;
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab {
  height: 44px;
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 44px;
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab .item {
  width: 50%;
  line-height: 44px;
  text-align: center;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-tab
  .title-tab
  .chosen {
  position: relative;
  color: #f03d37;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-tab
  .title-tab
  .chosen:after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 90%;
  border-top: 2px solid #f03d37;
}

.page-cinema-movie .filter-nav .close-tab .region .region-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 380px;
  background: #f5f5f5;
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav {
  width: 35%;
  height: 100%;
  overflow: scroll;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-sidenav
  .district,
.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-sidenav
  .subway {
  min-height: 100%;
  background-color: #fff;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-sidenav
  .district-item {
  height: 44px;
  padding-left: 10px;
  line-height: 44px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-sidenav
  .district-item.chosen {
  color: #f03d37;
  background: #f5f5f5;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-list-item {
  width: 65%;
  height: 100%;
  overflow: scroll;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-list-item
  .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  height: 45px;
  line-height: 45px;
  padding: 0 25px;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-list-item
  .item
  span {
  display: inline-block;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-list-item
  .item.chosen {
  color: #f03d37;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .region
  .region-list
  .region-list-item
  .item.chosen:before {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  top: 18px;
  width: 11.5px;
  height: 8px;
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/chosen.750a49ba.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.page-cinema-movie .filter-nav .close-tab .brand {
  min-height: 150px;
  max-height: 352px;
  font-size: 15px;
  overflow: scroll;
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  line-height: 44px;
  height: 44px;
  padding: 0 15px 0 26px;
  color: #333;
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item.chosen {
  color: #dd403b;
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item.chosen:before {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  top: 18px;
  width: 11.5px;
  height: 8px;
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/chosen.750a49ba.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .brand
  .brand-item:not(:last-child):after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item span {
  display: inline-block;
}

.page-cinema-movie .filter-nav .close-tab .special {
  min-height: 208px;
}

.page-cinema-movie .filter-nav .close-tab .special .special-content {
  min-height: 150px;
  max-height: 381px;
  overflow: overlay;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .special
  .special-content
  .item-wrapper {
  margin: 11px 12px 13px 13px;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .special
  .special-content
  .item-wrapper
  .item-title {
  color: #333;
  font-size: 15px;
  line-height: 21px;
  margin-bottom: 13px;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .special
  .special-content
  .item-wrapper
  .item-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .special
  .special-content
  .item-wrapper
  .item-list
  .item {
  padding: 0 4px;
  width: 80px;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  background: #fff;
  font-size: 13px;
  color: #666;
  box-sizing: border-box;
}

.page-cinema-movie
  .filter-nav
  .close-tab
  .special
  .special-content
  .item-wrapper
  .item-list
  .item.chosen {
  background: #fcf0f0;
  border: 1px solid #dd403b;
  border-radius: 3px;
  box-sizing: border-box;
  color: #dd403b;
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 56px;
  width: 100%;
  background: #fff;
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn .btn {
  display: inline-block;
  height: 34px;
  width: 67px;
  margin-left: 12px;
  margin-top: 11px;
  text-align: center;
  line-height: 34px;
  font-size: 14px;
  color: #666;
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn .define-btn {
  margin-right: 12px;
  background: #dd403b;
  border-radius: 3px;
  color: #fff;
}

.page-cinema-movie .filter-nav .close-tab .special .border-half-px {
  position: relative;
}

.page-cinema-movie .filter-nav .close-tab .special .border-half-px:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border: 1px solid #e5e5e5;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border-radius: 6px;
  box-sizing: border-box;
  pointer-events: none;
}

.page-cinema-movie .filter-nav .noItem {
  line-height: 150px;
  text-align: center;
  font-size: 15px;
  color: #999;
}

.page-cinema-movie .locatebanner {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  border-radius: 5px;
  background: hsla(0, 0%, 93.7%, 0.9);
  color: #666;
  font-size: 13px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  margin: 0 12px env(safe-area-inset-bottom);
}

.page-cinema-movie .locatebanner-arrow {
  margin-top: 11px;
  margin-right: 5px;
  width: 14px;
  height: 14px;
  background: url();
  background-size: 100% 100%;
}

.page-cinema-movie .locatebanner-refresh-wrap {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  text-align: right;
}

.page-cinema-movie .locatebanner-refresh {
  display: inline-block;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/refresh.163f2101.png);
  background-size: 100% 100%;
}

.page-cinema-movie .city-entry-arrow {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #b0b0b0;
  display: inline-block;
  margin-left: 4px;
  margin-right: 5px;
  margin-top: 5px;
}

.page-cinema-movie {
  background: #fff;
}

.page-cinema-movie .movie-wrapper .mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.page-cinema-movie .movie-wrapper .locate-dis {
  display: none;
}

.page-cinema-movie .show-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column;
  flex-flow: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.page-cinema-movie .select-sticky {
  position: -webkit-sticky;
  position: sticky;
  background-color: #fff;
  top: 0;
  width: 100%;
  z-index: 1;
}

.fixed {
  height: 100%;
  overflow: hidden;
}
</style>